<template>
  <div class="userinfo">
    <b-row class="mt-5">
      <b-col md="" offset-md="2" lg="6" offset-lg="3">
        <b-card title="修改" class="text-left">
          <b-form >
            <!--头像---->
            <b-avatar rounded icon="people-fill" size="90" :src="this.user.touxiang"></b-avatar>
            <b-form-file accept=".jpg, .png" v-model="file" class="mt-3" plain></b-form-file>

            <b-form-group label="称呼">
              <b-form-input
                v-model="$v.user.nickname.$model"
                type="text"
                placeholder="输入您的称呼"
              ></b-form-input> 
              <b-form-invalid-feedback :state="validateState('nickname')">
                控制长度在1到15之间
              </b-form-invalid-feedback>  
            </b-form-group>

            <b-form-group label="性别">
              <b-form-radio v-model="user.sex" name="some-radios" value="男">男</b-form-radio>
              <b-form-radio v-model="user.sex" name="some-radios" value="女">女</b-form-radio>
            </b-form-group>

            <!--
            <b-form-group label="手机号">
              <b-form-input
                v-model="$v.user.telephone.$model"
                type="number"
                placeholder="输入您的手机号"
              ></b-form-input> 
              <b-form-invalid-feedback :state="validateState('telephone')">
                手机号格式错误
              </b-form-invalid-feedback>  
            </b-form-group>
            -->

            <b-form-group label="个性签名">
              <b-form-input
                v-model="$v.user.qianming.$model"
                type="text"
                placeholder="输入您的个性签名"           
              ></b-form-input>
              <b-form-invalid-feedback :state="validateState('qianming')">
                请把长度控制在0到25
              </b-form-invalid-feedback>
            </b-form-group>
            
            <b-form-group>
              <b-button 
                variant="outline-primary" 
                @click="change"
                block
              >修改</b-button>
            </b-form-group>
          </b-form>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>
    
<script>
import { required, minLength, maxLength } from 'vuelidate/lib/validators'
import customValidator from '@/helper/validator.js'
import { mapState, mapActions } from 'vuex';
import requestService from '@/service/requestService';
    
window.onload = function(){
}

export default {
  data() {
    return {
      user: {
        //username: mapState((state) => state.userModule.userName),
        nickname: '',
        //telephone: '',
        //签名长度25
        qianming: '',
        sex: '',
        touxiang: '',
      },
      file: null,
    }
  },
  computed: mapState({
    userName: (state) => state.userModule.userName,
  }),
  validations: {
      user: {
        /*telephone : {
          required,
          telephone : customValidator.telephoneValidator,
        },*/
        qianming : {
          required,
          minLength : minLength(0),
          maxLength : maxLength(25),
        },
        nickname:{
          required,
          minLength : minLength(0),
          maxLength : maxLength(15),
        }
      }
    },
  mounted(){
    this.getinfo()
  },
  methods: {
    validateState(name) {
        const { $dirty, $error } = this.$v.user[name]
        return $dirty? !$error : null
      },
    //获取用户数据，用于显示
    getinfo(){
      requestService.get('showProfile/'+ this.userName).then
      (result=> {
        this.user.nickname = result.data.data.nickname
        this.user.sex = result.data.data.sex
        this.user.qianming = result.data.data.desc
        this.user.touxiang = result.data.data.photo
      })
      /*requestService.get('user',{"username":this.user.username}).then
      (result=> {
        this.user.telephone = data.data.phone_number
      })*/
    },   
    async change(){
      //更新
      //console.log(this.file)
      var form = new FormData()
      if (this.file != null) {
        form.append("file", this.file)
        await requestService.post('upload', form).then(res => {       
        this.user.touxiang = res.data.url
        console.log(this.user.touxiang)
        /*var infoSend = {
        "username": this.userName,
        "nickname": this.user.nickname,
        "sex": this.user.sex,
        "desc": this.user.qianming,
        //照片文件
        "photo": this.user.touxiang,
        }
        requestService.post('updateProfile', infoSend).then(response => {
          console.log("修改成功")
          //this.$Message.info("修改成功");
        })
        .catch(err => {
          console.log("修改失败")
          //this.$Message.info("修改失败");
        })*/
      })
      }
    
      console.log(this.user.touxiang)
      var infoSend = {
        "username": this.userName,
        "nickname": this.user.nickname,
        "sex": this.user.sex,
        "desc": this.user.qianming,
        //照片文件
        "photo": this.user.touxiang,
      }
      requestService.post('updateProfile', infoSend).then(response => {
          console.log("修改成功")
          //this.$Message.info("修改成功");
        })
        .catch(err => {
          console.log("修改失败")
          //this.$Message.info("修改失败");
        })
    }
  }
}


</script>


<style lang="scss" scoped> 
</style>